<style lang="scss" scoped>
.el-cascader ::v-deep .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
</style>
<template>
  <div>
    <el-cascader
      class="region"
      v-model="value"
      placeholder="选择店铺分组"
      :options="cascadeList"
      :props="{ checkStrictly: true }"
      @change="handleChange"
      style="width: 320px; height: 20px"
    >
    </el-cascader>
  </div>
</template>
<script>
import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";
export default {
  data() {
    return {
      cascadeList: [],
      value: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        vueSecondId: null,
        componentType: "listAll",
      },
    };
  },
  created() {
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();
  },

  methods: {
    handleChange() {
      this.$emit("getsalesGrade", this.value);
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAll().then((response) => {
        // response.rows = [
        //     { channel: '抖音', shopName: 'VFU抖一抖店-抖音', brand: 'VFU' },
        //     { channel: '抖音', shopName: 'VFU-抖音小店', brand: 'VFU' },
        //     { channel: '头条放心购', shopName: 'VFU-头条放心购', brand: 'VFU' },
        //     { channel: '拼多多', shopName: 'VFU-拼多多', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微店', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微信商城', brand: 'VFU' },
        //     { channel: '小红书', shopName: 'VFU-小红书', brand: 'VFU' },
        //     { channel: '严选', shopName: 'VFU-严寻合作', brand: 'VFU' },
        //     { channel: '天猫', shopName: 'VFU运动旗舰店', brand: 'VFU' },
        //     { channel: '京东', shopName: 'VFU运动旗舰店-京东', brand: 'VFU' }
        // ];
        // const result = [];

        let result = this.transformData(response);
        this.value = [result[0].label];
        // , result[0].children[0].label
        this.$emit("getsalesGrade", this.value);
        this.cascadeList = result;
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },
  },
};
</script>